<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
})
// const linexData = ref([
    // '呼和浩特市',
    // '包头市',
    // '鄂尔多斯市',
    // '乌兰察布市',
    // '乌海市',
    // '巴彦淖尔',
    // '阿拉善盟',
    // '兴安盟',
    // '通辽市',
    // '赤峰市',
    // '呼伦贝尔市',
    // '锡林郭勒盟',
// ])
// const linesData = ref([237, 103, 479, 236, 479, 200, 234, 143, 345, 256, 89, 228])
// const linesData1 = ref([237, 105, 471, 236, 479, 189, 234, 123, 345, 246, 89, 199])
// let data = {
//     chart: [
//         {
//             month: '2016',
//             value: 138,
//             ratio: 14.89,
//         },

//         {
//             month: '2017',
//             value: 114,
//             ratio: 79.49,
//         },

//         {
//             month: '2018',
//             value: 714,
//             ratio: 75.8,
//         },

//         {
//             month: '2019',
//             value: 442,
//             ratio: 19.8,
//         },

//         {
//             month: '2020',
//             value: 622,
//             ratio: 44.5,
//         },

//         {
//             month: '2021',
//             value: 528,
//             ratio: 87.3,
//         },
//         {
//             month: '2022',
//             value: 528,
//             ratio: 87.3,
//         },
//     ],
// }

// //  x轴数据          象形柱图数据  折线图数据
// let xAxisMonth = [],
//     barData = [],
//     lineData = []
// for (let i = 0; i < data.chart.length; i++) {
//     xAxisMonth.push(data.chart[i].month)
//     barData.push({
//         name: xAxisMonth[i],
//         value: data.chart[i].value,
//     })
//     lineData.push({
//         name: xAxisMonth[i],
//         value: data.chart[i].ratio,
//     })
// }
var xdata = ['呼和浩特市','包头市','鄂尔多斯市','乌兰察布市','乌海市','巴彦淖尔','阿拉善盟','兴安盟','通辽市','赤峰市','呼伦贝尔市','锡林郭勒盟',]
var data = [4083,687,77,43,12,26,84,4,262,74,27,39]
// var data1 = [0.86, 0.93, 0.93]
// var maxArr = [100, 100, 100]
const option = {
    // backgroundColor: "rgba(5,39,58,1)", //背景色
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
        // borderRadius: 5,
        // borderColor: "#6baab2",
        // borderWidth: 1,
        // formatter: function(params) {
        //     // params[0].data.nameCode
        //     let dot =
        //         '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>'
        //     return params[0].name + '：' + params[0].value
        // },
    },
    legend: {
        show: true,
        top: '2%',
        textStyle: {
            color: '#FFFFFF',
        },
        icon: 'circle', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
    },
    grid: {
        top: '13%',
        right: '2%',
        left: '10%',
        // bottom: '30px',
        // containLabel: true,
    },
    xAxis: {
        data: xdata,
        triggerEvent: true,
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: true,
            rotate: 0,
            interval: 0,
            textStyle: {
                // padding: [14, 0, 0, 0],
                fontSize: 12,
                color: 'rgba(255,255,255,1)',
            },
            formatter: function(e) {
                let str = '';
                let arr = e.split('');
                for(let i=0;i<arr.length;i++) {
                    str += arr[i] + '\n';
                }
                return str;
            }
        },
    },
    yAxis: [{
        name: '',
        triggerEvent: true,
        nameTextStyle: {
            color: 'rgba(255,255,255,1)',
            fontSize: 12,
            padding: [0, 0, 10, -20],
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,.1)',
            },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,.1)',
            },
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: 'rgb(148,159,167)',
                fontSize: 12,
            },
        },
    }],
    // color: ["#e54035"],
    series: [
        // {
        //     name: '研发费用',
        //     // barMinHeight: 100,
        //     type: 'bar',
        //     // type: 'pictorialBar',
        //     // barCategoryGap: '60%',
        //     symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
        //     // symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        //     itemStyle: {
        //         normal: {
        //             //barBorderRadius: 5,
        //             //渐变色
        //             color: '#FF7A00',
        //         },
        //     },
        //     // label: {
        //     //     normal: {
        //     //         show: true,
        //     //         position: "top",
        //     //         textStyle: {
        //     //             color: "#fff",
        //     //             fontSize:20
        //     //         }
        //     //     }
        //     // },
        //     data: data1,
        //     yAxisIndex: 0,
        //     // z: 5,
        // },
        {
            name: '',
            // barMinHeight: 10,
            type: 'bar',
            // type: 'pictorialBar',
            barCategoryGap: '60%',
            symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            // symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
                normal: {
                    //barBorderRadius: 5,
                    //渐变色
                   color: '#00C8FF',
                },
            },
            data: data,
            yAxisIndex:0,
            // z: 10,
        },
    ],
}
const chart = ref()
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
